<template>
  <div class="monitoring">
    <div>
      <el-carousel class="news" height="480px">
        <el-carousel-item v-for="(item, index) in viewList" :key="index">
          <el-row>
            <el-col v-for="(item1,index1) in item.imgList" :key="index1" :span="12">
              <img class="parkImg" :src="item1" alt="" @click="showImg(item1)">
            </el-col>
          </el-row>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive,watch } from "vue";
// 声明类型
const PropsType = {
  buildings: {
    type: Array,
    require: true,
  },
}
export default defineComponent({
  props:PropsType,
  components: {
  },
  setup(props) {
    const viewList = ref([
      {
        imgList:[
          require("@/assets/school.png"),require("@/assets/school_1.png"),require("@/assets/school_2.png"),require("@/assets/school_3.png")
        ]
      },
      {
        imgList:[
          require("@/assets/school_3.png"),require("@/assets/school_2.png"),require("@/assets/school_1.png"),require("@/assets/school.png")
        ]
      },
      {
        imgList:[
          require("@/assets/school_2.png"),require("@/assets/school_1.png"),require("@/assets/school_3.png"),require("@/assets/school.png")
        ]
      },
      {
        imgList:[
          require("@/assets/school_1.png"),require("@/assets/school_2.png"),require("@/assets/school_3.png"),require("@/assets/school.png")
        ]
      }
    ])

    const url = ref(null)


    const showImg = (val:any) => {
      console.log(val)
    }

    // 监听
    watch(
      () => props.buildings,
      (val: any) => {
        let list = []
        val.forEach(item=>{
          item.cameraList = item.cameras.filter((item1)=> item1.equipmentItem == 3)
          if(item.cameraList.length > 0){
            list.push(item)
          }
        })
        console.log(list)
      }
    )

    return {
      viewList,
      showImg,
      url
    };
  },
});
</script>

<style lang="scss" scoped>
$box-height: 560px;
$box-width: 100%;
.monitoring {
  padding: 20px 16px;
  padding-top: 60px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .text {
    color: #c3cbde;
  }
}
.parkImg{
  width: 100%;
  height: 240px;
  padding: 2px 4px;
  cursor: pointer;
}
</style>
